<!--
  个人明细片
 -->
<template>
  <div @click="closeAllFn" :class="{hide: dialog}" class="cardfa">
      <div class="card" @click.stop>
          <div class="userinfo">
            <div style="margin-left:5px">
              <p style="margin-bottom: 0;">
                <span style="font-size: 22px;font-weight: 700;">{{ name }}</span>
                <!-- <v-icon color="blue" class="mb-1">mdi-account-tie</v-icon> -->
                <v-icon color="pink" class="mb-1">mdi-face-woman-outline</v-icon>
              </p>
              <p style="margin-bottom: 0;">创建时间：{{ time }}</p>
            </div>
            <img class="userimage" :src="imgsrc" alt="头像">
          </div>
          <div style="border-bottom: 1px solid rgba(0, 0, 0, 0.12);margin:15px 0;"></div>

          <div class="userAct">
            <v-spacer></v-spacer>
            <v-tooltip bottom>
              <template v-slot:activator="{ on }">
                <v-btn icon v-on="on" @click="editPwd">
                  <v-icon color="toolbar_l" medium>mdi-account-edit-outline</v-icon>
                </v-btn>
              </template>
              <span>修改密码</span>
            </v-tooltip>
            <v-tooltip bottom>
              <template v-slot:activator="{ on }">
                <v-btn icon v-on="on" class="ml-2" @click="logout">
                   <v-icon color="toolbar_l" medium>mdi-logout</v-icon>
                </v-btn>
              </template>
              <span>退出</span>
            </v-tooltip>
          </div>
      </div>
      <dialog-two :dialog="logoutDialog" :title="dialogTitle"
      @sureFn="dialogSure"
      @cancelFn="dialogCance"></dialog-two>
      <!-- 修改密码 -->
      <modify-pwd @close="closePwdDialog" :pDialog="pwdDialog"></modify-pwd>
  </div>
</template>

<script>
  import { logoutFn } from "@/assets/js/mainPage.js"
  // 引入模板
  import dialogTwo from "@/components/dialogTwo.vue"
  import modifyPwd from "@/components/modifyPwd.vue"

  export default{
     data:()=>({
       logoutDialog:false,
       dialogTitle:'确定退出吗？',

       //修改密码
       pwdDialog:false,

       dialog:true,//true为隐藏
     }),
     props:{
       pDialog:{
         default:true,
       },
       name:{
         default:"鱼鱼V语",
       },
       time:{
         default:"1995.08.28",
       },
       imgsrc:{
         default:"https://randomuser.me/api/portraits/women/75.jpg",
       }
     },
     watch:{
       pDialog(val){
         if(!val){
           this.dialog = false
         }
       },
       dialog(val){
         if(val){
           this.$emit("close",'userCardDialog',true)
         }
       }
     },
     methods:{
       //退出确认
       dialogSure(){
         var promiseOb = logoutFn()
         promiseOb.then((res)=>{
           if(res.data.code == 200){
             //打开新页面
             console.log("已经退出")
           }else{
             return Promise.reject("退出失败")
           }
         }).catch((rej)=>{
           console.log(rej)
         }).finally(()=>{
           this.logoutDialog = false
         })
       },
       //关闭修改密码
       closePwdDialog(){
         this.pwdDialog = false;
       },

       //退出取消
       dialogCance(){
         this.logoutDialog = false
       },

       closeAllFn(){
         this.dialog = true
       },
       //修改密码
       editPwd(){
         this.pwdDialog = true;
       },
       //退出
       logout(){
         this.logoutDialog = true
       },
     },
     components:{
       dialogTwo,
       modifyPwd,
     }
  }
</script>

<style scoped>

.hide{
  display: none!important;
}
.cardfa{
  position:fixed;
  width: 100%;
  height:100%;
  background-color: transparent;
  top:0px;
  left:0px;
  z-index:100;
}
.card{
   box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
   background-color:white;
   padding:10px 10px;
   position: absolute;
   top:20px;
   left:30px;
   width:300px;
   height:180px;
   border-radius: 10px;
}
.userinfo{
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.userimage{
  width:80px;
  border:80px;
  border-radius: 10px;
}
.userAct{
  display: flex;
  margin:auto;

}
</style>
